<template>
  <div class="">
    <el-card class="box-card"
             shadow='hover'>

      <el-row>
        <el-col :span='3'>
          <p id='title'>{{this.$route.query.classname}}</p>
        </el-col>
        <el-col :span='5'>
          <el-button type="primary"
                     @click="dialogVisible = true"
                     size="small"><i class="el-icon-plus"></i>添加学生</el-button>
          <el-button type="primary"
                     size="small"
                     @click='multiplyDel'><i class="el-icon-delete"></i>批量删除</el-button>

        </el-col>
        <el-col :span="1">
          <el-button type="primary"
                     size="small"
                     @click='goBack'>返回上一级</el-button>
        </el-col>
      </el-row>
      <el-table :data="studentSet"
                class='class-table'
                stripe
                border
                @selection-change="handleSelectionChange">
        <el-table-column type="selection"
                         width="55">
        </el-table-column>
        <el-table-column type="index"
                         width="60"
                         label="序 号"
                         align="center">
        </el-table-column>
        <el-table-column label="学生姓名"
                         prop="name"
                         align="center"
                         width="200">
        </el-table-column>
        <el-table-column label="性别"
                         align="center">
          <template slot-scope="scope">
            {{scope.row.sex===1?'男':'女'}}

          </template>
        </el-table-column>
        <el-table-column label="年龄(岁)"
                         align="center"
                         prop='age'>

        </el-table-column>
        <el-table-column label="操 作"
                         align="center">

          <template slot-scope="scope">
            <el-button type="warning"
                       size="mini"
                       @click='editStudentInfo(scope.row)'>修改</el-button>
            <el-button type="danger"
                       size="mini"
                       @click='handleDelete(scope.row.id)'>删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 弹框区 -->
      <!-- 添加学生 -->
      <el-dialog title="添加学生"
                 :visible.sync="dialogVisible"
                 width="400px"
                 center>
        <!-- 对话框主体 -->
        <div class="dialog-info">
          <el-form :model="studentForm"
                   ref='studentForm'
                   label-width="80px"
                   :rules="singerRules">
            <el-form-item label="姓名"
                          size="mini"
                          prop="name">
              <el-input v-model="studentForm.name"
                        placeholder="请输入学生姓名"></el-input>
            </el-form-item>
            <el-form-item label="性 别"
                          size="mini"
                          prop="sex">
              <el-radio-group v-model="studentForm.sex">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="0">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="年龄"
                          size="mini">
              <el-input v-model="studentForm.age"
                        placeholder="请输入学生年龄"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click='addStudentInfo'>确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改学生 -->
      <el-dialog title="修改学生"
                 :visible.sync="editdialogVisible"
                 width="400px"
                 center>
        <!-- 对话框主体 -->
        <div class="dialog-info">
          <el-form :model="studentForm"
                   ref='studentForm'
                   label-width="80px"
                   :rules="singerRules">
            <el-form-item label="姓名"
                          size="mini"
                          prop="name">
              <el-input v-model="studentForm.name"
                        placeholder="请输入学生姓名"></el-input>
            </el-form-item>
            <el-form-item label="性 别"
                          size="mini"
                          prop="sex">
              <el-radio-group v-model="studentForm.sex">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="0">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="年龄"
                          size="mini">
              <el-input v-model="studentForm.age"
                        placeholder="请输入学生年龄"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click='submitStudentInfo'>确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { getStudentsInfoInClass, addStudent, editStudent, delStudent } from '../../api/apiRequest'

export default {
  data () {
    return {
      studentId: 0,
      studentSet: [],
      classId: 0,
      dialogVisible: false,
      studentForm: {
        classes: Number(this.$route.query.classid),
        name: '',
        sex: '',
        age: ''
      },

      singerRules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请选择一个', trigger: 'change' }
        ]
      },
      classData: [],
      tempsingerData: [],
      //分页区
      total: 0,
      page: 1,
      page_size: 5,
      //过滤区
      search: '',
      //排序区
      ordering: '',
      //修改歌手对话框
      editdialogVisible: false,
      singerID: 0,
      //批量删除区
      collection: []
    };
  },
  mounted () {
    this.classId = this.$route.query.classid
    this.getStudentofClassesData()
  },


  methods: {
    //获取班级中学生的数据
    async getStudentofClassesData () {
      // console.log(this.classId);
      const { data: res } = await getStudentsInfoInClass(this.classId)

      this.studentSet = res.student_set.filter(item => {
        return item.is_delete == false
      })

    },
    goBack () {
      this.$router.go(-1)
    },
    async addStudentInfo () {
      console.log(this.studentForm);
      this.studentForm.age = Number(this.studentForm.age)


      const res = await addStudent(this.studentForm)
      if (res.status !== 201) return this.$message.error('新增学生失败！')
      this.dialogVisible = false
      this.getStudentofClassesData()
      return this.$message.success('新增学生成功！')

    },
    editStudentInfo (info) {
      this.studentId = info.id
      this.studentForm = {
        classes: Number(this.$route.query.classid),
        name: info.name,
        sex: info.sex,
        age: info.age
      }

      this.editdialogVisible = true
    },
    async submitStudentInfo () {
      console.log(this.studentId, this.studentForm);
      const res = await editStudent(this.studentId, this.studentForm)
      console.log(res);
      if (res.status !== 200) return this.$message.error('更新失败！')

      this.getStudentofClassesData()
      this.editdialogVisible = false
      return this.$message.success('更新成功！')
    },
    handleDelete (id) {
      console.log(id);
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await delStudent(id)
        this.getStudentofClassesData()
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    multiplyDel () {
      this.$confirm('确定批量删除么, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.collection) {
          this.collection.forEach(async item => {
            //遍历数组，进行对id的删除
            await delStudent(item.id)
            this.getStudentofClassesData()
          });

        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },

    handleSelectionChange (val) {
      this.collection = val
      console.log('collection', this.collection);
    }
  }
}
</script>

<style lang='sass' scoped>
#title
  font-weight: 600
.add-singer
  margin-top: 1rem
.class-table
  width: 80%
  margin-top: 1rem
.el-icon-plus
  padding-right: .3rem
.el-pagination
  margin-left: 20rem
  margin-top: 1rem
.singer-introduction
  height: 100px
  overflow: scroll
.el-upload
  .update-picture
    margin-top: .5rem
.el-row
  margin: 2rem 0
  .el-col
    border-radius: 4px
    .el-icon-delete
      margin-right: .5rem
</style>